<script setup lang="ts">
import { reactive,shallowReactive,readonly } from 'vue';
type M = {
  a: String,
  b: Number
}
// 也可以不用泛型
// 必须要泛型
let re1 = reactive<M>({ a: "1", b: 2 })
let re_list = reactive([])

let re_2 = reactive({ a: "1", b: 2 })
let re2_read=readonly(re_2)

let doView = () => {
  console.log("doView re1 ", re1)
  console.log("doView re_list ", re_list)
}
let doChange = () => {
  // 不需要加.value
  re1.a = "2222"
}
let doEditReadOnlyData = () => {
  re2_read.a="bb"

}
let doEditReadOnlyData2 = () => {
  re_2.a="bb"
}

let re_list_add = () => {
  re_list.push("1111")
}
</script>

<template>
  <div>
    {{ re1 }}
    <br>
    <input type="text" v-model="re1.a">
    <br>
    <input type="text" v-model="re1.b">
    <hr>
    <button @click="doView">查看</button>
    <hr>
    <button @click="doChange">提交</button>
    <hr>
    {{ re_list }}
    <ul>
      <li v-for="item in re_list">
        {{ item }}
      </li>
    </ul>
    <button @click="re_list_add">添加</button>
    <hr>
    {{ re_2 }}
    <br>
    <button @click="doEditReadOnlyData">只读</button>
    <button @click="doEditReadOnlyData2">只读2</button>
  </div>
</template>
<style scoped></style>
